<template>
  <div class="index-box d-flex" ref="index">
  	<div class="leftBox">
  		<div class="tree-box">
          <el-tree :data="treeList" node-key="typeId" ref="tree" :props="defaultProps" default-expand-all @node-click="handleNodeClick"></el-tree>
        </div>
  	</div>
  	<div class="rightBox">
  			<div class="mainBox">
          <div class="search" ref="search">
            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
              <el-form-item prop="tagName">
                <el-input v-model="searchForm.tagName" clearable placeholder="请输入标签名称"></el-input>
              </el-form-item>
              <el-form-item prop="time">
                <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至" size="small"
                  start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="clearfix">
                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
              </el-form-item>
              <el-form-item style="margin-left:auto">
                <MyRefresh/>
              </el-form-item>
            </el-form>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;" border :height="tableHeight" stripe>
              <!-- <el-table-column type="selection" width="55" ></el-table-column> -->
              <el-table-column prop="name" label="标签名称" align="center">
                <template #default="scope">
                  <el-tag  effect="plain" :style="{borderColor:scope.row.color,color: scope.row.color}">{{ scope.row.name }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="标签颜色" align="center">
                <template #default="scope">
                  <el-color-picker v-model="scope.row.color" size="small" disabled></el-color-picker>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="更新时间" align="center">
                 <template #default="scope">
                    {{parseTime(scope.row.insertDate)}}
                 </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="page" ref="page">
            <MyPagination
               :total="total"
               :page.sync="searchForm.pageNum"
               :limit.sync="searchForm.pageSize"
               @pagination="dataInfo"
             />
          </div>
        </div>
  	</div>
  </div>
</template>

<script>
  import {  getTagCategory, getTagList } from '@/api/getData';
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        userLoading: false,
        time:[],
        searchForm: {
          tagName: undefined,
          typeId :'',
          pageNum:1,
          pageSize:20,
        },
        treeList: [],
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        defaultProps: {
           children: 'children',
           label: 'name'
        },
        multipleSelection: '',
      }
    },
    mounted() {
      //this.dataInfo();
      this.getTree();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 35;
      })
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    methods: {
      async getTree() {
        try {
          const result = await getTagCategory();
          if (result.code == 200) {
            this.treeList = result.data;
            this.$nextTick(() => {
            	this.$refs.tree.setCurrentKey('1')//设置左边的树选中
            	this.searchForm.typeId = 1;
            	this.dataInfo();
            })
          } else {
            this.$message.error(result.message);
          }
        } catch (err) {
          console.log(err)
        }
      },
      async dataInfo() {
        try {
           let data = this.addDateRange(this.searchForm, this.time, 'startTime' , 'endTime');
          this.loading = true;
          const result = await getTagList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      resetQuery() {
        this.time = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      handleSearch() {
        this.searchForm.page = 1;
        this.dataInfo();
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.typeId,
          label: node.name,
          children: node.children
        };
      },
      handleNodeClick(data){/*树节点点击事件*/
        this.searchForm.page = 1;
        this.searchForm.typeId  = data.typeId;
        this.dataInfo();
      },
    }
  }
</script>

<style scoped lang="scss">
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:10px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .userModel /deep/ .el-color-picker__trigger{
    width:100%
  }
</style>
